<template>
  <view>

    <view style="padding: 10px;">
      <uni-row>
        <uni-col :span="manager ? 17 : 24">
          <uni-datetime-picker v-model="queryParams.violationDay" @change="onViolationDayChange" type="date" />
        </uni-col>

        <uni-col :span="6" :offset="1" v-if="manager">
          <button size="mini" type="primary" style="height: 37px;line-height: 37px;" @click="addViolationClassInterval">违纪登记</button>
        </uni-col>
      </uni-row>

      <uni-list :border="true" style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px">
        <uni-list-item
            thumb-size="lg"
            :title="getItemTitle(item)"
            :thumb="handleImageUrl(item.cover)"
            :note="'违纪时间：'+item.violationTime"
            v-for="(item,index) in violationClassIntervalList"
            :key="index"
            @click="goToDetail(item)" link>
          <template v-slot:footer>
            <view style="display: flex">
              <uni-badge type="warning" text="未认领" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-if="isEmpty(item.studentIds)"/>
              <uni-badge type="success" text="已认领" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-else/>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
import violationClassIntervalApi from "@/api/modules/violationClassInterval";
export default {
  data() {
    return {
      queryParams: {
        violationDay: null,
        teacherReceiveQuery: false,
      },
      manager: false,
      violationClassIntervalList: []
    }
  },
  created() {
    this.manager = this.getStorage("roleName",'') === '部门经理';
    this.queryParams.teacherReceiveQuery = !this.manager;
  },
  onShow() {
    this.getViolationClassIntervalPage();
  },
  methods: {
    getItemTitle(item){
      let className = item.className;
      let studentNames = item.studentNames;
      return this.isEmpty(studentNames) ? className : className + "\n" + studentNames;
    },
    goToDetail(item) {
      console.log("打开课间违纪详情",item);
      // 点击事件，跳转到详情页面
      uni.navigateTo({
        url: `/pages_duty/classTeacher/violation/violationClassIntervalDetail?id=${item.id}`
      });
    },
    getViolationClassIntervalPage(){
      this.showLoadingByQuery();
      violationClassIntervalApi.getPageList(this.queryParams).then(res=>{
        this.violationClassIntervalList = res.data.list;
        this.hideLoading();
      }).catch(()=>{
        this.hideLoading();
      });
    },
    onViolationDayChange(val){
      console.log("onViolationDayChange() day:",val)
      if(!val){
        this.queryParams.violationDay = null;
      }
      this.getViolationClassIntervalPage();
    },
    addViolationClassInterval() {
      uni.navigateTo({
        url: "/pages_duty/classTeacher/violation/violationClassIntervalDetail"
      })
    },
  }
}
</script>

<style>
</style>
